<script setup lang="ts">
defineOptions({
  name:'LevelRegion'
})
import { getHospitalLevelRegionAPI } from '@/api/home';
import { HospitalLevelRegion } from '@/api/type/home';
import { ref } from 'vue';
const emit=defineEmits(['getLevel','getRegion'])
//获取等级列表
const LevelList=ref<HospitalLevelRegion>([])
let activeLevel=ref<string>('')
const getHospitalLevel=async()=>{
  const res=await getHospitalLevelRegionAPI('HosType')
  LevelList.value=res.data
}
const changeLevel=(value:string)=>{
  activeLevel.value=value
  emit('getLevel',value)
}
//获取地区列表
const RegionList=ref<HospitalLevelRegion>([])
const activeRegion=ref<string>('')
const getHospitalRegion=async()=>{
  const res=await getHospitalLevelRegionAPI('Beijin')
  RegionList.value=res.data
}
const changeRegion=(value:string)=>{
  activeRegion.value=value
  emit('getRegion',value)
}
getHospitalLevel()
getHospitalRegion()
</script>

<template>
  <div class="level">
    <div class="title">医院</div>
    <div class="content">
      <div class="level_list">
        <span class="label">等级：</span>
        <div class="condition_wrapper">
          <span :class="{active:activeLevel===''}" @click="changeLevel('')">全部</span>
          <span :class="{active:activeLevel===item.value}" v-for="item in LevelList"
           :key="item.id" @click="changeLevel(item.value)">{{item.name}}</span>
        </div>
      </div>
      <div class="region">
        <div class="label">等级：</div>
        <ul class="condition_wrapper">
          <li :class="{active:activeRegion===''}" @click="changeRegion('')">全部</li>
          <li :class="{active:activeRegion===item.value}" @click="changeRegion(item.value)"
           v-for="item in RegionList" :key="item.id">{{item.name}}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.level {
  display: flex;
  flex-direction: column;
  padding: 20px 80px 10px 0;
  .title {
    color: #333;
    font-size: 16px;
    margin-bottom: 30px;
  }
  .content {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    .level_list{
      display: flex;
      .label {
        color: #999;
      }
      .condition_wrapper {
        display: flex;
        span {
        color: #666;
         margin-left: 26px;
         margin-bottom: 10px;
         &.active {
          color: #4490F1;
         }
        }
        span:hover {
          color: #4490F1;
          cursor: pointer;
        }
      }
    }
    .region {
      display: flex;
      .label {
        color: #999;
        width: 56px;
      }
      .condition_wrapper {
        display: flex;
        flex-wrap: wrap;
        li {
          color: #666;
          margin-left: 26px;
          margin-bottom: 10px;
          &.active{
            color: #4490F1;
          }
        }
        li:hover {
          color: #4490F1;
          cursor: pointer;
        }
      }
    }
  }
}
</style>